<template>
  <el-row :class="'approve-box'" v-if="isShowIdeApprove" :id="viewId">
    <el-form :model="datas" ref="datas" :rules="fromCheck">
      <el-form-item prop="desc">
        <el-input type="textarea" :class="'approve-inp'" :rows="4" resize="none" placeholder="请输入内容" v-model="datas.desc"></el-input>
      </el-form-item>
      <el-form-item class="approve-btn-box">
        <el-button class="btn yes-btn" :disabled="isBtnDisable" @click="submitYesApproveText('datas', '1')">同意</el-button>
        <el-button class="btn back-btn" :disabled="isBtnDisable" @click="backApprove('datas', '2')">驳回</el-button>
      </el-form-item>
    </el-form>
  </el-row>
</template>
<script>
function fetchSaveApprove(store, opts) {
  return store.dispatch('SAVE_APPROVE_INFO', opts)
}
export default {
  props: {
    isShowIdeApprove: {
      type: Boolean,
      default: true
    },
    isBtnDisable: {
      type: Boolean,
      default: true
    },
    viewId: {
      type: [Number, String],
      default: ''
    }
  },
  data() {
    return {
      approve: '',
      datas: {
        desc: ''
      },
      fromCheck: {
        desc: [{ required: true, message: '请输入内容' }]
      }
    }
  },
  beforeCreate() {},
  mounted() {},
  methods: {
    submitYesApproveText(formName, type) {
      this.saveApproveInfo(formName, type)
    },
    backApprove(formName, type) {
      this.saveApproveInfo(formName, type)
    },
    saveApproveInfo(formName, type) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.datas.interviewId = this.viewId
          this.datas.exType = type
          fetchSaveApprove(this.$store, this.datas).then(() => {
            console.log(this.$store)
            let tempObj = this.$store.getters.getSaveApproveInfo
            if (tempObj.state === '0000') {
              this._showMessage('success', tempObj.message)
            } else {
              this._showMessage('error', tempObj.message)
            }
          })
        } else {
          return false
        }
      })
    },
    _showMessage(type, msg) {
      this.$message({
        showClose: true,
        message: msg,
        type: type
      })
    }
  }
}
</script>
<style lang="scss">
.approve-box {
  background-color: #f8f8f8;
  padding-bottom: 13px;
  margin-bottom: 20px;
  .approve-inp {
    .el-textarea__inner {
      border-radius: 0px;
      border: none;
    }
  }
  .approve-btn-box {
    width: 100%;
    margin-top: 13px;
    text-align: left;
    .btn {
      width: 70px;
      height: 34px;
      border: none;
      color: #fff;
      border-radius: 4px;
      border: 1px solid #f8f8f8;
    }
    .yes-btn {
      background-color: #00c57d;
      margin-left: 20px;
    }
    .yes-btn:hover {
      background-color: #00b363;
    }
    .back-btn {
      background-color: #f25d44;
      margin-left: 18px;
    }
    .back-btn:hover {
      background-color: #cd4d33;
    }
  }
}
</style>

